<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>个人信息</title>
    <link rel="stylesheet" href="../css/page-health-orderInfo.css"/>
    <link rel="stylesheet" href="../plugins/elementui/index.css"/>
    <!--<script src="../plugins/jquery/dist/jquery.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>-->
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">个人中心</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="form-info">
            <div class="info-title">
                <span class="name">信息详情</span>
            </div>
            <form class="info-form">
                <div class="input-row">
                    <label>用户名</label>
                    <input id="test" v-model="memberInfo.name" type="text" class="input-clear edit" placeholder="未设置">
                </div>

                <div class="input-row" >
                    <label >密码</label>
                    <input id="password" v-model="memberInfo.password" type="password" @input="showCheckPassword()" class="input-clear edit"
                           style="flex:3;border: none" placeholder="未设置">
                </div>

                <div class="input-row" :style="displayStyle">
                    <label style="margin-right: 118px">确认密码</label>
                    <input id="password2" v-model="memberInfo.password2" type="text" class="input-clear edit"
                           style="flex:3;border: none" placeholder="未设置">
                </div>

                <div class="input-row single-radio">
                    <label class="radio-title">性别</label>
                    <div class="radio-list">
                        <div class="radio">
                            <input v-model="memberInfo.sex" id="item1" type="radio" name="sex" value="1" checked
                                   disabled>
                            <label for="item1"></label>
                            <span>男</span>
                        </div>
                        <div class="radio">
                            <input v-model="memberInfo.sex" id="item2" type="radio" name="sex" value="2" disabled>
                            <label for="item2"></label>
                            <span>女</span>
                        </div>
                    </div>
                </div>
                <div class="input-row">
                    <label>手机号</label>
                    <input v-model="memberInfo.phoneNumber" type="text" class="input-clear edit" placeholder="未设置">
                </div>
                <div class="input-row">
                    <label>身份证号</label>
                    <input v-model="memberInfo.idCard" type="text" class="input-clear edit" placeholder="未设置">
                </div>
                <!--原生样式,不同浏览器显示风格不同!-->
                <!--<div class="input-row">
                    <label for="birthday">生日</label>
                    <input v-model="memberInfo.birthday" type="date" id="birthday" placeholder="未设置"
                           style="flex:3; line-height: 30px;font-size: 20px; border: none" class="input-clear edit" >
                </div>-->

                <!--使用elementUI样式-->
                <div class="input-row">
                    <div class="block">
                        <label  style="margin-right: 120px">生日</label>
                        <el-date-picker
                                :readonly="readonlyValue"
                                v-model="memberInfo.birthday"
                                type="date"
                                placeholder="未设置"
                                format="yyyy - MM - dd "
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                </div>


                <div class="input-row">
                    <label>邮箱</label>
                    <input v-model="memberInfo.email" type="text" class="input-clear edit" placeholder="未设置">
                </div>
                <div class="input-row">
                    <label>注册日期</label>
                    <input v-model="memberInfo.regTime" type="text" class="input-clear" placeholder="未设置">
                </div>

                <div class="input-row">
                    <span id="testspan" style="color: #0000cc">修改个人信息请点击下方编辑按钮后修改</span>
                </div>

                <div id="validateCode" class="input-row" style="display: none">
                    <label>验证码</label>
                    <input v-model="validateCode" type="text" class="input-clear edit" placeholder="请输入验证码">
                </div>

            </form>
            <div class="box-button">
                <button @click="editMemberInfo()" type="button" class="btn order-btn">编辑个人信息</button>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            //会员信息
            memberInfo: {},
            validateCode:'',
            readonlyValue:true,
            passwordCheck:'',
            displayStyle:{display:'none'}
        },
        methods: {

            showCheckPassword(){
                this.displayStyle.display='block';
            },
            //编辑或修改个人信息
            editMemberInfo() {
                //编辑或修改个人信息
                //获取按钮value值
                let btn = $(".btn").html();
                //alert(btn);
                if (btn == '编辑个人信息') {
                    //关闭输入框只读属性,关闭单选框禁用
                    $(".edit").attr('readonly', false);
                    $("#item1").removeAttr("disabled");
                    $("#item2").removeAttr("disabled");
                    this.readonlyValue=false;
                    //将编辑按钮修改为修改
                    $("#testspan").html("点击下方按钮获取验证码!");
                    $(".btn").html("点击获取验证码!");

                } else if (btn == '点击获取验证码!') {
                    //表单输入相关内容进行校验
                    let reg1=/^[1][3,4,5,7,8][0-9]{9}$/;
                    if (!reg1.test(this.memberInfo.phoneNumber)) {
                        this.$message.error("请输入正确的手机号码!");
                        return false;
                    }

                    //判断密码是否修改以及二次密码输入是否一致
                    //校验密码是否改动,二次密码是否输入一致
                    /*if (this.memberInfo.password!=this.passwordCheck){
                        //修改了密码
                        if (this.memberInfo.password!=this.memberInfo.password2){
                            this.$message.error("两次密码不一致!");
                            return false;
                        }
                    }else{
                        if (this.memberInfo.password2!='' && this.memberInfo.password!=this.memberInfo.password2){
                            this.$message.error("两次密码不一致!");
                            return false;
                        }
                    }
                    this.$message("密码校验通过!");*/

                    if (this.displayStyle.display=='block' && this.memberInfo.password!=this.memberInfo.password2){
                        this.$message.error("两次密码不一致!");
                        return false;
                    }
                    //this.$message("密码校验通过!");
                    //return false;
                    let reg2 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if (!reg2.test(this.memberInfo.idCard)){
                        //身份信息不合法,给出错误提示
                        this.$message.error("身份证号码输入有误,请检查后重新输入!");
                        return false;
                    }

                    $("#testspan").html("输入验证码后点击下方修改按钮进行修改!");
                    $(".btn").html("修改个人信息");
                    $("#validateCode").show();
                    //alert(this.memberInfo.phoneNumber);
                    //发送验证码
                    axios.post("/validateCode/send4Login.do?telephone="+this.memberInfo.phoneNumber).then((res)=>{
                        if (res.data.flag){
                            this.$message({
                                type:'success',
                                message:res.data.message,
                                center:true
                            });
                        }else{
                            //短信发送失败
                            this.$message({
                                type:'error',
                                message:'验证码发送失败请重试!',
                                center:true
                            });
                            $("#testspan").html("点击下方按钮获取验证码!");
                            $(".btn").html("点击获取验证码!");
                        }
                    }).catch(()=>{
                        this.$message({
                            type:'error',
                            message:'验证码发送失败请重试!',
                            center:true
                        });
                        $("#testspan").html("点击下方按钮获取验证码!");
                        $(".btn").html("点击获取验证码!");
                    });

                } else {

                    //提交前进行表单验证
                    let reg1=/^[1][3,4,5,7,8][0-9]{9}$/;
                    if (!reg1.test(this.memberInfo.phoneNumber)) {
                        this.$message.error("请输入正确的手机号码!");
                        return false;
                    }

                    //再次确认密码修改是否一致
                    if (this.displayStyle.display=='block' && this.memberInfo.password!=this.memberInfo.password2){
                        this.$message.error("两次密码不一致!");
                        return false;
                    }

                    let reg2 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if (!reg2.test(this.memberInfo.idCard)){
                        //身份信息不合法,给出错误提示
                        this.$message.error("身份证号码输入有误,请检查后重新输入!");
                        return false;
                    }
                    //alert($("#testspan").html());

                    //弹出对话框的形式
                    /*this.$prompt('请输入验证码', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^\d{6}$/,
                        inputErrorMessage: '验证码格式不正确'
                    }).then(({ value }) => {
                        this.$message({
                            type: 'success',
                            message: '你的验证码是: ' + value
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });*/

                    //修改用户信息获取表单数据
                    //console.log(this.memberInfo);
                    //发送ajax请求将数据带回后台处理
                    axios.post("/member/editMemberInfo.do?validateCode="+this.validateCode, this.memberInfo).then((res) => {
                        if (res.data.flag) {
                            //修改成功,跳转至个人信息展示
                            //this.$message(res.data.message,'success',3000);
                            //location.href="/pages/memberInfo.html";
                            //刷新界面
                            this.$message.success(res.data.message);
                            //location.reload();
                            //修改成功,跳转至个人信息展示
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                            return true;

                        } else {
                            this.$message.error(res.data.message);
                        }
                    }).catch(() => {
                        this.$message.error('修改失败!请稍后重试!');
                    });
                    //修改失败,刷新界面重试
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                }
            },
        },
        created() {
            //发动Ajax请求，根据套餐ID查询套餐信息，用于页面展示
            axios.post("/member/checkLogin.do").then((res) => {
                if (res.data.flag) {
                    //查询成功，为模型数据赋值
                    this.memberInfo = res.data.data;
                    //获取原始密码便于二次校验
                    this.passwordCheck=this.memberInfo.password;

                    //this.memberInfo={phoneNumber:"1234",regTime:"2020-10-09",name:"张三"};
                    $(".input-clear").attr('readonly', true);
                    //let regTime=this.memberInfo.regTime;
                    this.memberInfo.regTime = this.memberInfo.regTime.split(" ")[0];
                    if (this.memberInfo.birthday != null) {
                        this.memberInfo.birthday = this.memberInfo.birthday.split(" ")[0];
                    }

                } else {
                    location.href = "/pages/login.html";
                }
            });
        }
    });

</script>

</html>